<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>移动设备(联动)</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>
    <script src="libs/layerStyle.js"></script>

    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
</head>

<body>
<div id="map"></div>
<div class="opt_panel">
    <div class="opt_intro">
        拖拽地图中的变压器，实现变压器和关联线设备的联动
    </div>
</div>
<script>
    //示例说明：
    //该示例描述了如何通过移动点设备并带动关联的线设备节点进行同步移动（面设备同理）
    //线路不存在整体移动的情况，如果需要整体移动线路，请自行监听鼠标事件，通过计算鼠标移动的差值，动态去更新线路的每个节点坐标。
    //【注：SymbolLayer将每个设备都放在了单独的图层中，以减少数据遍历，当添加的设备较多时（200个）就会明显有卡顿，所以SymbolLayer只适合进行少量设备编辑的场景，如需大量渲染设备且无空间编辑需求请使用GridFeatureLayer】

    //自定义示例参数
    mapOptions = {
        zoom: 20,
        center: [118.16953496070641, 24.461226692660446]//[118.16683039069176, 24.47665079504064]
    }


    //示例功能代码
    var symbolLayer = null
    var testDatas = null
    var isMoving = false

    var pointDev = null
    var lineDev = null

    function onMouseMove(e) {
        if (isMoving) {
            //获取当前位置
            let movingPoint = [e.lngLat.lng, e.lngLat.lat]
            //更新点设备位置
            pointDev.setGeometry(movingPoint)
            //更新点设备关联的线上对应节点的位置
            let lineGeom = lineDev.getGeometry()
            lineGeom[0][1] = movingPoint
            lineDev.setGeometry(lineGeom)
        }

    }

    function initPage() {
        pointDev = new egisV2.symbol.ElePointSymbol({
            // convertSize:true,
            devId: 'a100012222',//oid，psrid
            devTypeId: '301000432423',//设备类型
            symbolId: "2020061",//符号ID
            symbolRotate: 0,//旋转角度
            symbolSize: 2,//大小
            symbolColor: '#ff0000',//颜色
            symbolOpacity: 1,//透明度
            symbolScalable: true,//缩放
            coordinates: [118.16953496070641, 24.461226692660446],//坐标
            attributes: {a: 1, b: 2}//其它信息
        })

        lineDev = new egisV2.symbol.EleLineSymbol({
                devId: 'b20fdfds001',//oid，psrid
                devTypeId: '354219fdsfds85',//设备类型
                symbolId: '410',//符号ID
                symbolWidth: 6,//线宽
                // convertSize:false,//栅格数据所需使用的参数
                symbolColor: '#ff0000',//颜色
                symbolOpacity: 1,//透明度
                coordinates: [
                    [[118.16933496070641, 24.461226692660446], [118.16953496070641, 24.461226692660446], [118.17253496070641, 24.464226692660446]]
                ],//坐标
                attributes: {c: 3, d: 4}//其它属性
            }
        )
        testDatas = [
            lineDev,
            pointDev
            // new egisV2.symbol.EleTextSymbol(
            //     {
            //         devId: 'testText',//oid，psrid
            //         devTypeId: 'dsae',//设备类型
            //         symbolColor: '#ff00ff',//颜色
            //         symbolSize: 20,//大小
            //         symbolColor: '#ff0000',//颜色
            //         symbolText: '测',//文本
            //         coordinates: [116, 31],//坐标
            //         attributes: {c: 3, d: 4}//其它属性
            //     }
            // ),
            //将上面的线设备换成下面的面设备，一样可以实现联动
            // new egisV2.symbol.EleFillSymbol(
            //     {
            //         type: 'fill',//类型point or line or fill
            //         devId: 'c20001',//oid，psrid
            //         devTypeId: '1988000',//设备类型
            //         symbolColor: '#ff0000',//颜色
            //         symbolFillColor: '#00ff00',//透明度
            //         symbolFillOpacity: 0.5,//透明度
            //         coordinates: [
            //             [[115.9998, 31],[116, 31],[116.0002, 31.0002]]
            //         ],//坐标
            //         attributes: {c: 3, d: 4}//其它属性
            //     }
            // )
        ]

        symbolLayer = new egisV2.layer.SymbolLayer(map)
        symbolLayer.addEleDevs(testDatas)


        // map.setLayoutProperty(testDatas[0].getLayerKey(), 'symbol-scaleable', true)


        // map.setCenter([116, 31]); //设置地图中心点
        map.on('mousedown', pointDev.getLayerKey(), e => {
            map.dragPan.disable()
            isMoving = true
            map.on('mousemove', onMouseMove)
            console.log('mousedown', e)
        })

        map.on('mouseup', e => {
            map.dragPan.enable()
            isMoving = false
            map.off('mousemove', onMouseMove)
            console.log('mouseup', e)
        })


        // egisV2.options.excludedFillTypes = egisV2.options.excludedFillTypes.concat(['1001019','1001018'])
        // map.showTileBoundaries = false
        // mapServiceUrl = msServiceUrl + '/mapservice/mapexport/vecformat'
        // initGridLayer()

        initGridTileExtLayer()

    }

    window.onload = function () {
        loadGeoMap_ms(initPage)
    }


</script>
</body>
</html>
